<template>
  <wd-popup
    :model-value="show"
    custom-style="padding-top: 24rpx;background:#f5f6fa;border-radius: 16rpx 16rpx 0 0"
    safe-area-inset-bottom
    position="bottom"
    transition="slide-up"
    @update:model-value="$emit('update:show', $event)"
  >
    <view
      class="close-button"
      @click="$emit('update:show', false)"
    >
      <wd-icon
        name="close"
        size="36rpx"
        color="#333333"
      />
    </view>
    <view class="order-address-title">
      收货信息
    </view>
    <view class="order-address-block">
      <view
        v-if="region"
        class="address-info"
      >
        <view class="label">
          地区
        </view>
        <view class="content">
          {{ region }}
        </view>
      </view>
      <view class="divider" />
      <view class="address-info">
        <view class="label">
          详细地址
        </view>
        <view class="content">
          {{ recipientInfo.address }}
        </view>
      </view>
      <view class="divider" />
      <view class="address-info">
        <view class="label">
          收件人
        </view>
        <view class="content">
          {{ recipientInfo.recipient }}
        </view>
      </view>
      <view class="divider" />
      <view class="address-info">
        <view class="label">
          收件人手机
        </view>
        <view class="content">
          {{ recipientInfo.mobile }}
        </view>
      </view>
    </view>
  </wd-popup>
</template>

<script setup lang="ts">
const props = defineProps<{
  show: boolean;
  order: OrderVO;
}>();

defineEmits<{
  'update:show': [val: boolean];
}>();

const recipientInfo = computed(
  () => props.order.recipient_info as unknown as RecipientInfo
);
const region = computed(() => {
  const list: string[] = [];
  if (recipientInfo.value.prov) {
    list.push(recipientInfo.value.prov);
  }
  if (recipientInfo.value.city) {
    list.push(recipientInfo.value.city);
  }
  if (recipientInfo.value.area) {
    list.push(recipientInfo.value.area);
  }
  if (recipientInfo.value.street) {
    list.push(recipientInfo.value.street);
  }
  return list.join(' ');
});
</script>

<style lang="scss" scoped>
.close-button {
  position: absolute;
  top: 36rpx;
  right: 36rpx;
  z-index: 1;
}

.order-address-title {
  font-size: 32rpx;
  font-weight: bold;
  line-height: 60rpx;
  margin-bottom: 24rpx;
  text-align: center;
}
.order-address-block {
  margin: 0 24rpx 24rpx;
  padding: 20rpx 24rpx;
  border-radius: 16rpx;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12rpx;
  .address-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 60rpx;
    gap: 24rpx;
    .label {
      flex-shrink: 0;
    }
    .content {
      display: flex;
    }
  }
  .divider {
    height: 1px;
    background-color: #eeeeee;
  }
}
</style>
